<template>
  <div class="w">
    <div class="post">
      <!-- 左边推荐城市 -->
      <div class="post_left" v-if="CitiesList.length > 0">
        <recommend :CitiesList="CitiesList" @searchCity="getPosts"></recommend>
      </div>
      <!-- 右边 -->
      <div class="post_right">
        <!-- 搜索 -->
        <div class="right_search">
          <!-- 搜索框 -->
          <div class="search_main">
            <input
              type="text"
              placeholder="请输入想去的地方,比如:'广州"
              v-model="postSearch"
              @keyup.enter="getPosts"
            />
            <span class="el-icon-search" @click="getPosts=getPosts"></span>
          </div>
          <!-- 推荐 -->
          <div class="serch_recommend">
            推荐 :
            <!-- <span>广州</span>
            <span>上海</span>
            <span>北京</span>-->
            <span
              v-for="(item,index) of recommendCity"
              :key="index"
              @click="getPosts(item)"
            >{{item}}</span>
          </div>
        </div>
        <!-- 推荐攻略 -->
        <div class="recommended_strategy">
          <h3>推荐攻略</h3>
          <el-button type="primary">
            <span class="el-icon-edit"></span>
            写游记
          </el-button>
        </div>
        <!-- 文字列表 -->
        <div class="post_list" v-if="postsList.length>0">
          <postBar
            v-for="(item,index) of initPagination"
            :key="index"
            :postItem="item"
            @postBarClick="postBarClick"
          ></postBar>
        </div>
        <!-- 分页器 -->
        <div class="post_pagination">
          <!-- 分割 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="SizePage"
            :page-sizes="[3, 5, 10, 15]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="postsList.length"
          ></el-pagination>
          <!-- 分割 -->
        </div>
      </div>
    </div>
    <!-- 计算属性测试 -->
    <!-- {{initPagination}} -->
  </div>
</template>

<script>
import recommend from "../../components/post/recommend";
import postBar from "../../components/post/postBar";
export default {
  data() {
    return {
      CitiesList: [],
      postsList: [],
      // 搜索框下推荐城市
      recommendCity: ["广州", "上海", "北京"],
      // input search
      postSearch: "",
      // 分页器
      currentPage: 1,
      SizePage: 3
    };
  },
  methods: {
    //  城市菜单列表
    getCities() {
      this.$axios({
        method: "get",
        url: "/posts/cities"
      }).then(res => {
        //  console.log('res: ', res);
        const { data } = res.data;
        this.CitiesList = data;
        // console.log("data: ", data);
      });
    },
    // 文章列表
    getPosts(value) {
      const params = {};
      if (this.postSearch) {
        params.city = this.postSearch;
      }
      if (value) {
        params.city = value;
      }
      this.$axios({
        method: "get",
        url: "posts",
        params
      }).then(res => {
        // console.log('res: ', res);
        const { data } = res.data;
        this.postsList = data;
        // console.log("data: ", data);
        // 判断是否没有数据
        if (data.length < 1) {
          this.$message({
            message: "非常抱歉 当前城市搜索不到",
            type: "warning"
          });
          setTimeout(() => {
            this.postSearch = "";
            this.getPosts();
          }, 1500);
        }
      });
    },
    // 分页器
    handleSizeChange(value) {
      // console.log('value1: ', value);
      this.SizePage = value;
      // console.log('this.SizePage: ', this.SizePage);
    },
    handleCurrentChange(value) {
      // console.log('value2: ', value);
      this.currentPage = value;
    },
    // post Bar 组件点击函数 根据id 跳转到 攻略详情页
    postBarClick(id) {
      // console.log('id: ', id);
      this.$router.push({
        path: "post/detail",
        query: {
          id
        }
      });
    }
  },
  mounted() {
    this.getCities();
    this.getPosts();
  },
  computed: {
    // 分页处理数据函数
    initPagination() {
      const start = (this.currentPage - 1) * this.SizePage;
      // console.log("start: ", start);
      const end = start + this.SizePage * 1;
      // console.log("end: ", end);
      const data = this.postsList.slice(start, end);
      // console.log("data: ", data);
      return data;
    }
  },
  components: {
    recommend,
    postBar
  }
};
</script>

<style lang="less" scoped>
.post {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.post_left {
  width: 260px;
}
.post_right {
  width: 700px;
  // 搜索框
  .right_search {
    .search_main {
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 3px solid orange;
      input {
        border: 0;
        outline: none;
        text-indent: 1em;
        width: 620px;
      }
      // 放大镜
      span {
        margin-right: 10px;
        color: orange;
        font-size: 24px;
        font-weight: 700;
        cursor: pointer;
      }
    }
    .serch_recommend {
      margin: 12px 0;
      font-size: 12px;
      span {
        padding: 0 8px;
        cursor: pointer;
        &:hover {
          color: orange;
          text-decoration: underline;
        }
      }
    }
  }
  // 推荐攻略
  .recommended_strategy {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
    // padding-bottom: -22px;
    box-sizing: border-box;
    h3 {
      // padding-bottom: 26px;
      line-height: 55px;
      border-bottom: 2px solid orange;

      font-weight: 400;
      color: orange;
    }
  }
}
</style>